<template>
  <base-container>
    <div
      class="h-45px px-20px bg-gradient-to-r from-[#E6F4FF] to-[#fff] leading-[45px] text-[#333] text-[14px] rounded-10px"
    >
      <i :size="20" class="px-5px text-[#1777ff] iconfont ic-guanyushuoming" />
      <span class="text-[#170304]">以下是在你的经营类目范围内平台提供的商品，如你能接单请进行同步。</span>
    </div>
    <div class="mt-20px">
      <avue-table-search
        v-model="searchParams"
        :option="searchOption"
        @search-change="loadTableSearch"
        @search-reset="loadTableSearchReset"
      />
    </div>
    <base-table-card>
      <template #header-left>
        <el-tabs v-model="searchParams.tabType" @tab-change="handleTabChange">
          <el-tab-pane label="未接单" name="0">
            <template #label>
              <div class="text-[#625c5d]">未接单({{ orderNotNumber }})</div>
            </template>
          </el-tab-pane>
          <el-tab-pane label="接单中" name="1">
            <template #label>
              <div class="text-[#625c5d]">接单中({{ orderNumber }})</div>
            </template>
          </el-tab-pane>
          <el-tab-pane label="已变更" name="2">
            <template #label>
              <div class="text-[#625c5d]">已变更({{ orderchange }})</div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #header-right>
        <el-button type="primary" @click="handleBatchButton('acceptanceOrder')"> 批量开启接单 </el-button>
        <el-button type="primary" plain @click="handleBatchButton('modifyAddress')"> 批量修改地址 </el-button>
      </template>
      <avue-crud
        :option="tableOption"
        ref="avueCrudRef"
        :data="tableData"
        v-model="formData"
        :header-cell-style="{ background: '#f8f7f7' }"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadGetTableData"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
        @row-save="loadAdd"
        @row-update="loadEdit"
        @selection-change="handleSelectionChange"
        @select="handleSelect"
        @select-all="handleSelectAll"
        @expand-change="handleExpandChange"
      >
        <template #rentPlan="{ row }">
          <div>{{ computedFormatterRentPlan(row.rentPlan) }}</div>
        </template>
        <template #rentObject="{ row }">
          <div>{{ computedFormatterRenPlan(row.rentObject) }}</div>
        </template>
        <template #id="{ row }">
          <div class="p-10px">
            <div class="flex bg-[#f8f7f7] py-5px rounded-5px px-20px justify-between">
              <div class="text-left text-ct2">
                商品编号：<span class="text-bd">{{ row.id }}</span>
              </div>
              <div @click="handleShowProductCode(row)">
                <i class="iconfont ic-erweimalunkuo text-bd cursor-pointer"></i>
              </div>
            </div>
            <div class="flex items-center py-8px">
              <el-image :src="row.imageUrl" class="w-120px"></el-image>
              <div class="px-10px">
                <div class="flex text-left">
                  <div class="mx-10px">
                    <el-tag type="primary" size="small">{{ row.productType == "1" ? "全新" : "二手" }}</el-tag>
                  </div>
                  <div>{{ row.productName }}</div>
                </div>
                <div class="text-left text-12px pt-5px px-6px">
                  商品配件：<span class="text-ct5">{{ row.productComponentFlag == "1" ? "有" : "无" }}</span>
                </div>
                <div class="text-left text-12px pt-5px px-6px">
                  增值服务：<span class="text-ct5">{{ row.additionalServices ? row.additionalServices : "-" }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #productStatus="{ row }">
          <div>
            <el-tag :type="prductStatusTypeComputed(row.productStatus)">
              {{ prductStatusLabelComputed(row.productStatus) }}
            </el-tag>
          </div>
        </template>
        <template #expand="data">
          <div class="children-table">
            <avue-crud
              :ref="el => (tableRef[data.index] = el)"
              :data="data.row.skuList"
              :option="tableOptionChildren"
              :header-cell-style="{ background: '#f3f2f2' }"
              @selection-change="
                sections => {
                  handleSelectionChildrenChange(sections, data.row);
                }
              "
              @select="
                (childrenSections, childrenRow) => handleSelectChildren(childrenSections, childrenRow, data.index)
              "
              @select-all="
                (childrenSections, childrenRow) => {
                  handleSelectChildrenAllChange(childrenSections, childrenRow, data.index);
                }
              "
            >
              <template #acceptStatus="childrenData">
                <div>
                  <el-switch
                    v-model="childrenData.row.acceptStatus"
                    :active-value="1"
                    :inactive-value="0"
                    @change="
                      value => {
                        handleAcceptStatus(data.row, value, childrenData.row);
                      }
                    "
                  >
                  </el-switch>
                </div>
              </template>
            </avue-crud>
          </div>
        </template>
        <template #menu="{ row }">
          <el-button type="primary" text @click="handleDetailShow(row)"> 查看</el-button>
        </template>
      </avue-crud>
    </base-table-card>
    <base-dialog v-model="acceptanceOrderDialog.modelValue" v-bind="acceptanceOrderDialog">
      <div class="text-center text-16px">确认开启接单吗？</div>
      <div class="text-center pt-20px">
        <el-button type="default" class="w-170px h-40px" size="large" @click="handleAcceptanceOrderButton('cancel')"
          >取消</el-button
        >
        <el-button type="primary" class="w-170px h-40px" size="large" @click="handleAcceptanceOrderButton('confirm')"
          >确认</el-button
        >
      </div>
    </base-dialog>
    <BaseDialog v-model="modifyAddressDialog.modelValue" v-bind="modifyAddressDialog">
      <div>
        <h5 class="text-14px py-10px">发货地址</h5>
        <avue-crud
          :option="receiveGoodsTableOption"
          :header-cell-style="() => ({ background: '#f8f7f7' })"
          :data="deliveryAddressList"
          v-model="formData"
          :page="page"
          :table-loading="tableLoading"
          @refresh-change="loadGetTableData"
          @current-change="loadTablePageChange"
          @size-change="loadTablePageSizeChange"
          @row-save="loadAdd"
          @row-update="loadEdit"
        >
          <template #radio="{ row }">
            <el-radio v-model="receiveGoodsRadio" :value="row.id"></el-radio>
          </template>
          <template #areaId="{ row }">
            <div>{{ `${row.provinceName}${row.cityName}${row.areaName}` }}</div>
          </template>
        </avue-crud>
      </div>
      <div>
        <h5 class="text-14px py-10px">收货地址</h5>
        <avue-crud
          :option="sendGoodsTableOption"
          :data="shippingAddressList"
          v-model="formData"
          :page="page"
          :table-loading="tableLoading"
          :header-cell-style="() => ({ background: '#f8f7f7' })"
          @refresh-change="loadGetTableData"
          @current-change="loadTablePageChange"
          @size-change="loadTablePageSizeChange"
          @row-save="loadAdd"
          @row-update="loadEdit"
        >
          <template #radio="{ row }">
            <el-radio v-model="sendGoodsRadio" :value="row.id"> </el-radio>
          </template>
          <template #areaId="{ row }">
            <div>{{ `${row.provinceName}${row.cityName}${row.areaName}` }}</div>
          </template>
        </avue-crud>
      </div>
      <div class="text-center">
        <el-button type="primary" class="text-center" :loading="buttonDisabled" @click="handleModifyAddressClick"
          >确认修改</el-button
        >
      </div>
    </BaseDialog>
    <base-dialog v-model="isShowProductCode" :show-footer="false" title="商品二维码" width="404px">
      <div class="flex items-center pb-10px border-b-ct5">
        <div class="pr-10px">
          <el-image :src="productCode.imageUrl" class="w-[80px] h-[80px]" />
        </div>
        <span class="text-16px text-[#170304]">{{ productCode.productName }}</span>
      </div>
      <div>
        <div class="py-20px bg-pink-linear rounded-10px">
          <div class="text-center py-10px">
            <svg
              width="140"
              height="140"
              viewBox="0 0 140 140"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <rect x="0.5" y="0.5" width="139" height="139" rx="7.5" fill="white" />
              <rect x="0.5" y="0.5" width="139" height="139" rx="7.5" stroke="#E7E5E5" />
              <rect x="8" y="8" width="124" height="124" rx="8" fill="url(#pattern0_1166_20123)" />
              <defs>
                <pattern id="pattern0_1166_20123" patternContentUnits="objectBoundingBox" width="1" height="1">
                  <use xlink:href="#image0_1166_20123" transform="scale(0.00166667)" />
                </pattern>
                <image
                  id="image0_1166_20123"
                  width="600"
                  height="600"
                  preserveAspectRatio="none"
                  xlink:href=""
                />
              </defs>
            </svg>
          </div>
          <div class="text-center text-16px flex items-start justify-center">
            <div class="pt-2px">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M10.2966 2.39478L10.9333 2.53052L11.5632 2.76294L12.1775 3.07251L12.7781 3.53638L12.8035 3.55493L13.3318 4.11743L13.7585 4.77563L14.0779 5.49048L14.2654 6.40063L14.3123 6.69165L15.0251 6.82739L15.699 7.0979L16.323 7.44458L16.8591 7.88989H14.3259L14.113 8.62622L13.8279 9.3606L13.491 10.0383L13.1091 10.6584L12.6912 11.1985L12.199 11.7024L11.6453 12.1672L11.0349 12.5745L10.3552 12.9016L9.65015 13.1536L8.92358 13.3469L8.18335 13.4631L7.42944 13.5217H6.6687L5.90308 13.4631L5.14038 13.3665H5.03394L4.71069 13.3079L4.60718 13.2893L4.49878 13.2502L4.39429 13.2307H4.30151L4.52417 13.2112H4.74487L4.96753 13.1917H5.19019L6.38354 13.0374L7.5437 12.7678L8.27222 12.5159L8.96948 12.2444L9.63257 11.9153L10.2537 11.5286L10.8308 11.0823L11.3601 10.5813L11.8328 10.0383L12.2468 9.41821L12.5994 8.74243L12.8845 7.98755L13.0955 7.17407L13.1248 6.7688L13.0779 6.36157L12.8494 5.62622L12.5066 4.98853L12.1003 4.50415L11.6003 4.0979L10.9744 3.7688L10.2332 3.57446L9.38062 3.53638L8.65796 3.69067L8.00464 3.98169L7.43726 4.38794L6.96851 4.89185L6.61401 5.49048L6.28882 6.65259L6.28296 7.02075L6.31714 7.38696L6.34058 7.81274L5.99585 7.83228H5.67261L5.34937 7.85181L4.72534 7.96802L3.98315 8.27759L3.19702 8.89771L2.61206 9.74829L2.36011 10.4065L2.25757 11.0823L2.29468 11.761L2.45874 12.3801L2.73999 12.9788L3.12769 13.5022L3.60815 13.9475L4.17163 14.2961L4.80444 14.5286L5.50171 14.6448L5.84546 14.6643H6.19995L6.5564 14.6448H11.8582L11.9158 14.6643L11.9714 14.6838L12.0974 14.7415L12.2175 14.8176L12.3201 14.8948L12.4275 14.9719L12.8162 15.2239L12.8845 15.2629L13.0251 15.3596L13.113 15.4368L13.1843 15.4563L13.1863 14.6643L13.5281 14.6448H13.863L14.7322 14.509L15.3445 14.2571L15.8601 13.928L16.3689 13.4436L16.7527 12.8821L17.0085 12.2834L17.1443 11.6643L17.1619 11.0247L17.0623 10.4065L16.8494 9.80591L16.5281 9.26392L16.0984 8.76196L15.5652 8.35571L14.9939 8.0647L14.6531 7.94849L14.3259 7.89087H16.8591L16.8826 7.90942L17.3708 8.43286L17.7693 9.05103L18.072 9.70923L18.2634 10.4456L18.3279 11.1799V11.2571L18.2517 12.1096L18.0193 12.9016L17.6443 13.6379L17.0994 14.3547L17.0496 14.3928L17.0046 14.4514L16.1794 15.1077L15.4841 15.4563L15.2068 15.5725L15.1062 15.6116L15.0037 15.6311L14.9001 15.6692L14.7957 15.6887L14.3484 15.7659V17.6243L13.9402 17.3723L12.2292 16.2317L11.658 15.8635L11.6306 15.8049H6.11401L5.36304 15.7854L4.74878 15.7083L4.0105 15.4954L3.34839 15.1663L2.76538 14.761L2.26538 14.2766L1.85034 13.7542L1.5271 13.1731L1.24292 12.3801L1.11108 11.5862L1.1228 10.7942L1.26538 10.0188L1.53101 9.302L1.90308 8.64575L2.40112 8.04517L2.98999 7.54126L3.66187 7.13696L4.40991 6.82739L4.91284 6.72974L5.10327 6.69165L5.13843 6.55591L5.18042 6.16821L5.34937 5.51001L5.60132 4.89185L5.92847 4.34985L6.32495 3.84595L6.78101 3.42017L7.28784 3.05396L7.83862 2.76294L8.42163 2.55005L9.03101 2.41431L9.65894 2.37524L10.2966 2.39478ZM5.49878 11.1985L5.56421 11.3342L5.62866 11.4504L5.68823 11.5286L5.76929 11.5862L5.89331 11.6633L6.02319 11.7219L6.11987 11.7795L6.0271 11.8381L5.76343 11.9739L5.68628 12.0315L5.63257 12.1096L5.56616 12.2258L5.49683 12.3616L5.43433 12.4583L5.3728 12.3801L5.24292 12.1096L5.18237 12.0315L5.10522 11.9739L4.96753 11.9153L4.82983 11.8381L4.74683 11.7795L4.83374 11.7415L4.97729 11.6448L5.11499 11.5667L5.18823 11.5286L5.24683 11.4309L5.3103 11.3147L5.37476 11.1799L5.43433 11.1018L5.49878 11.1985ZM11.9197 5.89673L11.8962 6.47876L11.7957 7.07837L11.4529 8.12329L11.0828 8.80103L10.6179 9.41919L10.0701 9.94165L9.44409 10.387L8.29761 10.9475L7.72437 11.1213L6.67065 11.3342L6.77905 11.2961L7.12573 11.1799L7.81909 10.8518L8.45483 10.4651L9.02417 10.0002L9.52515 9.49634L9.9519 8.91724L10.2966 8.27759L10.5544 7.58032L10.7185 6.80786L10.7693 6.16821L10.7712 5.97485V5.87817L10.7849 5.64575L11.9197 5.89673Z"
                  fill="#F11921"
                />
              </svg>
            </div>
            <div class="pl-3px text-[#170304] text-16px font-600">青云租 轻松租</div>
          </div>
          <div class="text-center text-ct5">打开app/支付宝/微信扫一扫，轻松租赁</div>
        </div>
        <ProductIconGroup></ProductIconGroup>
      </div>
      <div class="text-center pt-20px">
        <el-button type="default" class="w-170px h-40px" size="large" @click="handleProductCodeButton('cancel')">
          取消
        </el-button>
        <el-button type="primary" class="w-170px h-40px" size="large" @click="handleProductCodeButton('download')">
          下载
        </el-button>
      </div>
    </base-dialog>
    <product-detail :visble="showDetail" :current-data="currentData" @hide="handleHideDetail" />
  </base-container>
</template>

<script setup>
  import {
    searchOption,
    tableOption,
    receiveGoodsTableOption,
    sendGoodsTableOption,
    tableOptionChildren,
  } from "@/crudOption/product/ProductSynchronous.js";
  import useCrudHook from "avue-table/useCrudHook";
  import { ElMessage } from "element-plus";
  import { computed, nextTick, ref } from "vue";
  import ProductDetail from "./ProductDetail.vue";
  import ProductIconGroup from "./components/ProductIconGroup/index.vue";
  import { flatten } from "@/utils/lodash.js";

  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.GetProductPlatformList,
    search: { tabType: "0" },
    getParamsFormat: params => {
      // 开通时间
      if (params.createTime && params.createTime.length === 2) {
        params.createTimeStart = params.createTime[0];
        params.createTimeEnd = params.createTime[1];
        delete params.createTime;
      }
      // 到期时间
      if (params.expiredTime && params.expiredTime.length === 2) {
        params.expiredTimeStart = params.expiredTime[0];
        params.expiredTimeEnd = params.expiredTime[1];
        delete params.expiredTime;
      }
      // 返回查询参数
      return params;
    },
    add: Api.customer.AddCustomer,
    edit: Api.customer.UpdateCustomer,
  });
  const productList = ref([]); //选择商品集合
  const skuIdList = ref([]);
  const prductStatusOptions = ref([
    { label: "已售罄", value: 1, type: "info" },
    { label: "未上架", value: 2, type: "warning" },
    { label: "已上架", value: 3, type: "success" },
    { label: "已下架", value: 4, type: "info" },
  ]);
  const sendGoodsRadio = ref(""); //发货方式
  const receiveGoodsRadio = ref(""); //收货方式
  const shippingAddressList = ref([]); //收货地址列表
  const deliveryAddressList = ref([]); //发货地址列表
  const isShowDrawer = ref(false); //抽屉展示
  const isShowProductCode = ref(false); //商品二维码弹框
  const showDetail = ref(false); //商品二维码弹框
  const productCode = ref(null); //商品二维码
  const tableRef = ref({}); //子表格实例
  const avueCrudRef = ref({}); //表格实例
  const currentData = ref({}); //表格实例
  const buttonDisabled = ref(false);

  const tableRow = ref({
    imageUrl: "",
  }); //表格行数据
  //格式化租赁对象
  const computedFormatterRenPlan = computed(() => {
    return (rentObject = "1,2") => {
      let result = "";
      if (rentObject) {
        result = rentObject.replace("1", "个人").replace("2", "企业");
      }
      return result;
    };
  });
  //格式化租赁方案
  const computedFormatterRentPlan = computed(() => {
    return (rentPlan = 1) => {
      if (rentPlan == 1) {
        return "统一方案";
      } else {
        return "指定方案";
      }
    };
  });

  //格式化商品状态
  const prductStatusLabelComputed = computed(() => {
    return (value = 1) => {
      const item = prductStatusOptions.value.find(item => item.value == value);
      return item.label;
    };
  });
  //格式化商品状态标签状态
  const prductStatusTypeComputed = computed(() => {
    return (value = 1) => {
      const item = prductStatusOptions.value.find(item => item.value == value);
      return item.type;
    };
  });
  //商品二维码配置
  const acceptanceOrderDialog = ref({
    modelValue: false,
    title: "提示",
    width: "410px",
    showFooter: false,
  }); //接单弹框显示
  const modifyAddressDialog = ref({
    modelValue: false,
    title: "批量修改地址",
    width: "80%",
    showFooter: false,
    height: "500px",
  }); ///修改地址接单弹框显示

  const orderNotNumber = ref(0); //未接单
  const orderNumber = ref(0); //接单
  const orderchange = ref(0); //变更

  //切换标签
  const handleTabChange = value => {
    loadGetTableData().then(() => {
      if (value == 0) {
        orderNotNumber.value = tableData.value.length;

        tableOptionChildren.value.column.acceptStatus.hide = false;
      }
      if (value == 1) {
        orderNumber.value = tableData.value.length;

        tableOptionChildren.value.column.acceptStatus.hide = false;
      }
      if (value == 2) {
        orderchange.value = tableData.value.length;
        // 变更不显示标签状态
        tableOptionChildren.value.column.acceptStatus.hide = true;
      }
    });
  };
  //接单接口函数
  const loadProductPlatformRelateAcceptanceStatus = data => {
    Api.product.ProductPlatformRelateAcceptanceStatus(data).then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage.success(res.message);
        loadGetTableData();
      }
    });
  };
  //批量按钮点击事件 acceptanceOrder接单状态 modifyAddress修改地址
  const handleBatchButton = (type = "acceptanceOrder") => {
    if (type === "acceptanceOrder") {
      if (productList.value && productList.value.length) {
        acceptanceOrderDialog.value.modelValue = !acceptanceOrderDialog.value.modelValue;
      } else {
        ElMessage.warning("请勾选表格数据");
      }
      return false;
    }
    if (type === "modifyAddress") {
      if (productList.value && productList.value.length) {
        modifyAddressDialog.value.modelValue = !modifyAddressDialog.value.modelValue;
        laodAddressChooseList();
      } else {
        ElMessage.warning("请勾选表格数据");
      }
      return false;
    }
  };
  //接单弹框按钮事件
  const handleAcceptanceOrderButton = (type = "cancel") => {
    if (type === "cancel") {
      acceptanceOrderDialog.value.modelValue = !acceptanceOrderDialog.value.modelValue;
    }
    if (type === "confirm") {
      const selectASet = productList.value.map(item => ({
        skuIds: flatten(item.skuIds),
        id: item.id,
        acceptStatus: 1,
      }));
      loadProductPlatformRelateAcceptanceStatus({ selectASet });
      acceptanceOrderDialog.value.modelValue = !acceptanceOrderDialog.value.modelValue;
    }
  };
  //展开行事件
  const handleExpandChange = (row, expandRow) => {
    if (expandRow.includes(row)) {
      nextTick(() => {
        const subTable = tableRef.value[tableData.value.indexOf(row)];
        if (subTable) {
          nextTick(() => {
            row.skuList.forEach(item => {
              subTable.toggleRowSelection(item, item.isChecked === true);
            });
          });
        }
      });
    }
  };

  const selectedList = ref([]);

  const updateSelectedList = () => {
    const selectedList = tableData.value
      .filter(item => item.isChecked === true || item.isChecked === "")
      .map(item => ({ ...item, skuList: item.skuList.filter(item => item.isChecked) }));
    selectedList.value = selectedList;
    //   // 当没有选中的时候，解决不会自动去除表头半选bug，手动隐藏表头的选中状态（去除indeterminate的css类名）
    // if (!selectedList.length) {
    //   const headerRow = document.querySelector(".main-table-header")
    //   headerRow && headerRow.classList.remove("indeterminate")
    // }
  };

  //全选
  const handleSelectAll = selected => {
    tableData.value.forEach((item, index) => {
      avueCrudRef.value.toggleRowExpansion(item, true); // 展开子表
      // this.$refs.tableSelect.toggleRowExpansion(item, true) // 展开子表
      item.isChecked = selected.length === tableData.value.length; // 判断是否全选
      const subTable = tableRef.value[index];
      if (subTable) {
        subTable.clearSelection();
        // 判断是否全选
        if (selected.length === tableData.value.length) {
          subTable.toggleAllSelection();
          item.skuList.forEach(i => {
            i.isChecked = true;
          });
        } else {
          item.skuList.forEach(item => {
            item.isChecked = false;
          });
        }
      } else {
        item.skuList.forEach(item => {
          item.isChecked = selected.length === tableData.value.length;
        });
      }
    });
    updateSelectedList();
  };
  //单选
  const handleSelect = (selections, row) => {
    avueCrudRef.value.toggleRowExpansion(row, true); // 展开子表
    console.log(tableRef.value);
    console.log(tableData.value.indexOf(row));
    // row.isChecked = selections.includes(row)
    nextTick(() => {
      const subTable = tableRef.value[tableData.value.indexOf(row)];
      if (subTable) {
        subTable.clearSelection();
        if (selections.includes(row)) {
          row.skuList.forEach(item => {
            item.isChecked = true;
            subTable.toggleRowSelection(item, true);
          });
        } else {
          row.skuList.forEach(item => {
            item.isChecked = false;
          });
        }
      } else {
        row.skuList.forEach(item => {
          item.isChecked = selections.includes(row);
        });
      }
    });
    updateSelectedList();
  };
  //子表格选择
  const handleSelectionChange = selections => {
    productList.value = selections;
  };
  //子表格选择改变
  const handleSelectionChildrenChange = (selections, row) => {
    row.skuIds = selections.map(selection => selection.skuIds) || [];
    skuIdList.value = selections;
  };
  // 设置当前行的选中态
  const toggleRowSelection = (row, flag) => {
    if (row) {
      nextTick(() => {
        avueCrudRef.value && avueCrudRef.value.toggleRowSelection(row, flag);
      });
    }
  };
  //子表格单选选择
  const handleSelectChildren = (childrenSections, childrenRow, index) => {
    const mainItem = tableData.value[index];
    if (childrenSections.length > 0 && childrenSections.length === mainItem.skuList.length) {
      mainItem.isChecked = true;
    } else if (childrenSections.length > 0 && childrenSections.length < mainItem.skuList.length) {
      mainItem.isChecked = true;
    } else {
      mainItem.isChecked = false;
      avueCrudRef.value.toggleRowExpansion(mainItem, false);
    }
    toggleRowSelection(mainItem, mainItem.isChecked);
    mainItem.skuList.forEach(attachment => {
      attachment.isChecked = childrenSections.includes(attachment);
    });
    updateSelectedList();
  };

  const handleSelectChildrenAllChange = (childrenSections, childrenRow, index) => {
    const mainTable = avueCrudRef.value;
    const mainItem = tableData.value[index];
    if (childrenSections.length === mainItem.skuList.length) {
      mainItem.isChecked = true;
    } else {
      avueCrudRef.value.toggleRowExpansion(mainItem, false);
      mainItem.isChecked = false;
    }
    mainItem.skuList.forEach(attachment => {
      attachment.isChecked = childrenSections.includes(attachment);
    });
    mainTable.toggleRowSelection(mainItem, mainItem.isChecked);
    updateSelectedList();
  };
  //批量修改地址接口函数
  const laodAddressChooseList = () => {
    Api.product.AddressChooseList({}).then(res => {
      console.log(res);
      if (res.code == 200) {
        shippingAddressList.value = res.data.shippingAddressList;
        deliveryAddressList.value = res.data.deliveryAddressList;
      }
    });
  };
  //批量修改地址接口函数
  const loadProductPlatformRelateUpdateAddress = data => {
    buttonDisabled.value = true;
    Api.product.ProductPlatformRelateUpdateAddress(data).then(res => {
      buttonDisabled.value = false;
      if (res.code == 200) {
        ElMessage.success(res.message);
        modifyAddressDialog.value.modelValue = !modifyAddressDialog.value.modelValue;
        loadGetTableData();
        sendGoodsRadio.value = "";
        receiveGoodsRadio.value = "";
      }
    });
  };

  //展示详情
  const handleDetailShow = row => {
    tableRow.value = row;
    console.log(row, "row");
    isShowDrawer.value = !isShowDrawer.value;
    showDetail.value = true;
    currentData.value = row;
    // loadGetProductDetail(row.id);
  };
  //接单
  const handleAcceptStatus = (row, value, childrenRow) => {
    if (childrenRow.skuId) {
      loadProductPlatformRelateAcceptanceStatus({
        selectASet: [
          {
            skuIds: flatten(childrenRow.skuIds),
            id: row.id,
            acceptStatus: value,
          },
        ],
      });
    }
  };
  //显示产品码
  const handleShowProductCode = row => {
    console.log(row);
    isShowProductCode.value = !isShowProductCode.value;
    productCode.value = row;
  };
  //批量修改地址

  const handleModifyAddressClick = () => {
    if (sendGoodsRadio.value || receiveGoodsRadio.value) {
      const selectASet = productList.value.map(item => ({
        skuIds: flatten(item.skuIds),
        id: item.id,
        acceptStatus: 1,
        shippingAddressId: sendGoodsRadio.value, //发货地址
        deliveryAddressId: receiveGoodsRadio.value, //收货地址
      }));
      loadProductPlatformRelateUpdateAddress({ selectASet });
    } else {
      ElMessage.warning("请选择发货地址和收货地址");
    }
  };
  const initialize = () => {
    tableData.value = tableData.value.map(item => ({
      ...item,
      isChecked: false,
      skuList: item.skuList.map(i => ({
        ...i,
        isChecked: false,
      })),
    }));
  };
  onMounted(() => {
    loadGetTableData().then(() => {
      orderNotNumber.value = tableData.value.length;
    });
    initialize();
  });
  // 关闭详情
  const handleHideDetail = () => {
    showDetail.value = false;
  };
</script>
<style lang="scss" scoped>
  .purple {
    color: var(-bd);
  }

  .bg-bd-dark-2-rgb {
    background: var(--bd-dark-2-rgb);
  }

  :deep(.is-active) {
    font-weight: 700;
    font-size: 16px;
    color: #170304;
  }

  :deep(.is-active) {
    font-weight: 700;
    font-size: 16px;
    color: #170304;
  }

  .text-ct5 {
    color: var(--ct5);
  }

  .border-b-ct5 {
    border-bottom: 1px dashed var(--cb1);
  }

  .children-table {
    :deep(.el-table__row) {
      background-color: var(--fl1) !important;
    }

    :deep(.el-scrollbar) {
      margin-top: 2px !important;
    }
  }

  .bg-pink-linear {
    background: linear-gradient(0deg, var(--bd9) 0%, var(--bg) 200px);
  }

  .bg-ct5 {
    background: var(--ct5) !important;
  }
</style>
